<template>
    <div class="table-header">
        <div v-if="state.header.buttons.includes('back')" class="table-header-back-btn">
            <el-button type="info" title="返回" @click="onAction('back-button')">
                <SvgIcon name="table-back"></SvgIcon>

              <span class="table-header-operate-text">返回</span>
            </el-button>
        </div>
        <div class="table-header-title">
          <el-tag type="primary" effect="dark" > {{ state.header.title }} </el-tag>
        </div>
        <div class="flex pl-15" style="text-align: right;">
            <!--刷新-->
            <el-tooltip v-if="state.header.buttons.includes('refresh')" content="刷新" placement="top">
                <el-button color="#40485b" type="info" @click="onAction('refresh', { loading: true })">
                    <SvgIcon name="table-refresh"></SvgIcon>
                </el-button>
            </el-tooltip>
            <!--添加-->
            <el-tooltip v-if="state.header.buttons.includes('add')" content="添加" placement="top">
                <el-button type="success" @click="onAction('add')">
                    <SvgIcon name="table-add" size="14"></SvgIcon>
                    <span class="table-header-operate-text">添加</span>
                </el-button>
            </el-tooltip>
            <!--编辑-->
            <el-tooltip v-if="state.header.buttons.includes('edit')" content="编辑" placement="top">
                <el-button type="primary" :disabled="!enableBatchOpt" @click="onAction('edit')">
                    <SvgIcon name="table-edit" size="14"></SvgIcon>
                    <span class="table-header-operate-text">编辑</span>
                </el-button>
            </el-tooltip>
        </div>
        <div></div>
    </div>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import SvgIcon from '@/components/icon/index.vue';

import { TableDataState, TableDialogState, TableState } from '@/components/table/table';

const state = inject('state') as TableState<TableDataState, TableDialogState>;

const enableBatchOpt = computed(() => state.table.selection!.length > 0);

const onAction = (event: string, data: any = {}) => {
    state.onTableAction(event, data);
};
</script>
